<template>
  <div id="load" v-cloak>
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
          <ul class="list-group">
            <li class="list-group-item" v-for="(item,index) in frontData.List" :key="index">
              <div class="row">
                <div class="col-md-6 col-sm-5 col-xs-5 dataLeft">
                  <a href="#" class="loadTitle">{{item.title}} <img :src="firstString+item.imgurl" alt="下载" :data="item.content" class="load"></a>
                </div>
                <div class="col-md-6 col-sm-5 col-xs-7 dataRight">
                  <a href="#"  class="loadTitle" data-toggle="modal" data-target="#myModal"  @click.prevent="getLoadUrl">【下载地址】</a>
                  <span>{{item.author}}</span>
                  <em>{{item.created_at}}</em>
                </div>
              </div>
            </li>
          </ul>
          <nav aria-label="Page navigation">
            <ul class="pagination">
              <li>
                <router-link aria-label="Previous" v-show="currentPage>1" :to="detailUrl1+articleId.id+'/page/'+Number(currentPage-1)" @click.native="getCurrentPage(Number(currentPage-1))">
                  <span aria-hidden="true">上一页</span>
                </router-link>
              </li>
              <li v-for="(val,index) in totalPages" :key="index"><router-link :to="detailUrl1+articleId.id+'/page/'+Number(index+1)" @click.native="getCurrentPage(Number(index+1))">{{index+1}}</router-link></li>
              <li>
                <router-link aria-label="Previous" v-show="currentPage<totalPages" :to="detailUrl1+articleId.id+'/page/'+(Number(currentPage)+1)" @click.native="getCurrentPage(Number(currentPage)+1)">
                  <span aria-hidden="true">下一页</span>
                </router-link>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">下载地址</h4>
          </div>
          <div class="modal-body">
            {{loadUrl}}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>


</template>

<script>



    export default {
        name: "courseware-load",
        props:['articleId','frontData','totalPages'],
        data(){
          return{
            firstString:'http://www.gengyong.com.cn',
            detailUrl1:'/advice/type/',
            detailUrl2:'/id/',
            //当前页
            currentPage:1,
            loadUrl:''
          }
        },
        methods:{
          //点击页码拿到当前页的数据
          getCurrentPage(current){
            //拿到当前文章的类型
            var id=this.articleId.id;
            //console.log('下载id'+id);
            //当前页的页码
            this.currentPage=current;
            //console.log('下载page'+current);
            //console.log( '下载页数'+this.totalPages);
            var _this=this;
            this.$http.get('http://www.gengyong.com.cn/api/advice',{
              params:{
                page:current,
                type:id
              }
            }).then(function(res){
              _this.frontData.List=res.data.info.info;
            }).catch(function(err){
              console.log(err);
            });
          },
          getLoadUrl(){

            this.loadUrl=$('.load').attr('data');

          }
        },
        mounted(){
          //页面加载完成时显示对应页的数据
          this.getCurrentPage(this.$route.params.page);
        }
    }
</script>

<style scoped>

  @import '../assets/css/advice.css';
  [v-cloak] {
    display: none;
  }
</style>
